<!DOCTYPE html>
  <head>
    <title>Translate API Example</title>
  </head>
  <body>
    <div id="sourceText">Hello world</div>
    <div id="translation"></div>
    <script>
      function translateText(response) {
          console.log('----------> '+response);
        document.getElementById("translation").innerHTML += "<br>" + response.data.translations[0].translatedText;
      }
    </script>
    <script>
      var newScript = document.createElement('script');
      newScript.type = 'text/javascript';
      var sourceText = escape(document.getElementById("sourceText").innerHTML);

      console.log(sourceText);
      
      // WARNING: be aware that YOUR-API-KEY inside html is viewable by all your users.
      // Restrict your key to designated domains or use a proxy to hide your key
      // to avoid misuage by other party.
      //var source = 'https://www.googleapis.com/language/translate/v2?key=YOUR-API-KEY&source=en&target=de&callback=translateText&q=' + sourceText;
      //var source = 'https://www.googleapis.com/language/translate/v2?key=AIzaSyCcZgQPkYLilCs8E12ACXQG__mUlzjrRnY&source=en&target=ko&callback=translateText&q=' + sourceText;
      //var source = 'https://www.googleapis.com/language/translate/v2?key=AIzaSyCcZgQPkYLilCs8E12ACXQG__mUlzjrRnY&source=en&target=ko&callback=translateText&q=' + sourceText;
      var source = 'https://www.googleapis.com/language/translate/v2?key=AIzaSyCcZgQPkYLilCs8E12ACXQG__mUlzjrRnY&source=en&target=ko&callback=translateText&q=' + sourceText;

      // https://www.googleapis.com/language/translate/v2?q=hello&target=ko&source=en&key=AIzaSyCcZgQPkYLilCs8E12ACXQG__mUlzjrRnY

      //console.log(source);
      
      newScript.src = source;

      // When we add this script to the head, the request is sent off.
      document.getElementsByTagName('head')[0].appendChild(newScript);
    </script>
  </body>
</html>

<!-- 




-->